<template>
  <Loading :show="isLoading" />
  <view class="header">
    <view class="header-left">
      <image
        class="logo-image"
        src="/static/logo/logo2-02.png"
        mode="scaleToFill"
      />
    </view>
    <view class="header-right">
      <input
        class="search-input"
        type="text"
        v-model="searchQuery"
        placeholder="搜索商品"
        @confirm="handleSearch"
      />
      <image class="scan-icon" src="/static/search.png" @click="scanCode" />
    </view>
  </view>

  <scroll-view scroll-y class="content">
    <!-- 轮播图 -->
    <swiper
      class="swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
    >
      <swiper-item v-for="(item, index) in swiperList" :key="item.id">
        <image class="swiper-image" :src="item.src" @click="handleSwiperClick(item)" />
      </swiper-item>
    </swiper>

    <!-- 优惠活动 -->
    <view class="promotion-section">
      <view class="section-title">
        <text class="title-text">限时优惠</text>
        <text class="more-text" @click="navigateToPromotions">更多 ></text>
      </view>
      <scroll-view scroll-x class="promotion-scroll">
        <view 
          class="promotion-item" 
          v-for="promo in promotions" 
          :key="promo.id"
          @click="navigateToPromotionDetail(promo)"
        >
          <image class="promotion-image" :src="promo.image" mode="aspectFill" />
          <view class="promotion-info">
            <text class="promotion-title">{{ promo.title }}</text>
            <text class="promotion-price">¥{{ promo.price }}</text>
            <text class="promotion-original-price">¥{{ promo.originalPrice }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 商品推荐 -->
    <view class="recommend-section">
      <view class="section-title">
        <text class="title-text">商品推荐</text>
        <text class="more-text" @click="navigateToRecommend">更多 ></text>
      </view>
      <view class="recommend-grid">
        <view 
          class="recommend-item" 
          v-for="product in recommendProducts" 
          :key="product.id"
          @click="navigateToProductDetail(product)"
        >
          <image class="product-image" :src="product.image" mode="aspectFill" />
          <view class="product-info">
            <text class="product-name">{{ product.name }}</text>
            <text class="product-price">¥{{ product.price }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 门店信息 -->
    <view class="store-section" @click="navigateToStore">
      <view class="section-title">
        <text class="title-text">附近门店</text>
        <text class="more-text">查看全部 ></text>
      </view>
      <view class="store-info">
        <image class="store-image" src="/static/store.jpg" mode="aspectFill" />
        <view class="store-details">
          <text class="store-name">银河商城总店</text>
          <text class="store-address">成都市锦江区红星路三段1号</text>
          <text class="store-distance">距离您 0.5km</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import Loading from '@/components/Loading.vue';

const searchQuery = ref("");
const isLoading = ref(true);

// 轮播图数据
const swiperList = ref([
  { id: 1, src: "/static/Advertisement/binghongcha.jpeg" },
  { id: 2, src: "/static/Advertisement/maidong.jpeg" },
  { id: 3, src: "/static/Advertisement/fenda.jpeg" },
]);

// 优惠活动数据
const promotions = ref([
  {
    id: 1,
    title: "冰红茶",
    price: "3.5",
    originalPrice: "4.5",
    image: "/static/Advertisement/binghongcha.jpeg"
  },
  {
    id: 2,
    title: "脉动",
    price: "4.5",
    originalPrice: "5.5",
    image: "/static/Advertisement/maidong.jpeg"
  },
  {
    id: 3,
    title: "芬达",
    price: "3.0",
    originalPrice: "4.0",
    image: "/static/Advertisement/fenda.jpeg"
  }
]);

// 推荐商品数据
const recommendProducts = ref([
  {
    id: 1,
    name: "可口可乐",
    price: "3.0",
    image: "/static/products/cola.jpg"
  },
  {
    id: 2,
    name: "百事可乐",
    price: "3.0",
    image: "/static/products/pepsi.jpg"
  },
  {
    id: 3,
    name: "雪碧",
    price: "3.0",
    image: "/static/products/sprite.jpg"
  },
  {
    id: 4,
    name: "农夫山泉",
    price: "2.0",
    image: "/static/products/nongfu.jpg"
  }
]);

// 页面加载时显示加载动画
onMounted(() => {
  // 模拟数据加载
  setTimeout(() => {
    isLoading.value = false;
  }, 1000);
});

// 扫码功能
const scanCode = () => {
  uni.scanCode({
    success: function (res) {
      console.log("扫码结果：", res.result);
      // 处理扫码结果
      handleScanResult(res.result);
    },
    fail: function (err) {
      console.error("扫码失败：", err);
      uni.showToast({
        title: "扫码失败",
        icon: "error"
      });
    },
  });
};

// 处理扫码结果
const handleScanResult = (result: string) => {
  // 这里可以添加扫码后的处理逻辑
  console.log("处理扫码结果：", result);
};

// 搜索处理
const handleSearch = () => {
  if (!searchQuery.value.trim()) {
    uni.showToast({
      title: "请输入搜索关键词",
      icon: "none"
    });
    return;
  }
  // 跳转到搜索结果页
  uni.navigateTo({
    url: `/pages/search/index?keyword=${encodeURIComponent(searchQuery.value)}`
  });
};

// 轮播图点击
const handleSwiperClick = (item: any) => {
  // 处理轮播图点击事件
  console.log("轮播图点击：", item);
};

// 导航到优惠活动页
const navigateToPromotions = () => {
  uni.navigateTo({
    url: '/pages/promotion/index'
  });
};

// 导航到优惠活动详情
const navigateToPromotionDetail = (promo: any) => {
  uni.navigateTo({
    url: `/pages/promotion/detail?id=${promo.id}`
  });
};

// 导航到推荐商品页
const navigateToRecommend = () => {
  uni.navigateTo({
    url: '/pages/recommend/index'
  });
};

// 导航到商品详情
const navigateToProductDetail = (product: any) => {
  uni.navigateTo({
    url: `/pages/product/detail?id=${product.id}`
  });
};

// 导航到门店页
const navigateToStore = () => {
  uni.navigateTo({
    url: '/pages/store/index'
  });
};
</script>

<style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #ccc;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.header-left {
  flex: 1;
}

.logo-image {
  width: 100px;
  height: 50px;
}

.header-right {
  display: flex;
  align-items: center;
}

.search-input {
  width: 180px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

.scan-icon {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.content {
  margin-top: 70px;
  height: calc(100vh - 70px);
}

.swiper {
  width: 100%;
  height: 200px;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

/* 优惠活动样式 */
.promotion-section {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.title-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.more-text {
  font-size: 14px;
  color: #666;
}

.promotion-scroll {
  white-space: nowrap;
}

.promotion-item {
  display: inline-block;
  width: 150px;
  margin-right: 10px;
}

.promotion-image {
  width: 150px;
  height: 150px;
  border-radius: 8px;
}

.promotion-info {
  padding: 8px 0;
}

.promotion-title {
  font-size: 14px;
  color: #333;
  display: block;
}

.promotion-price {
  font-size: 16px;
  color: #ff4d4f;
  font-weight: bold;
  margin-right: 5px;
}

.promotion-original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

/* 商品推荐样式 */
.recommend-section {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
}

.recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.recommend-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 150px;
}

.product-info {
  padding: 8px;
}

.product-name {
  font-size: 14px;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.product-price {
  font-size: 16px;
  color: #ff4d4f;
  font-weight: bold;
}

/* 门店信息样式 */
.store-section {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
}

.store-info {
  display: flex;
  align-items: center;
}

.store-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  margin-right: 10px;
}

.store-details {
  flex: 1;
}

.store-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.store-address {
  font-size: 14px;
  color: #666;
  display: block;
  margin-bottom: 5px;
}

.store-distance {
  font-size: 12px;
  color: #999;
}
</style>
